<template>
  <div class="userList">
    <div class="title_box">
      <div class="title">字典列表</div>
      <!-- <el-button type="primary" @click="add">新增</el-button> -->
    </div>
    <div class="list_box">
      <div class="list_box_serch">
        <el-form :model="SerchForm" label-width="120px">
          <el-form-item label="字典名称：" prop="typeName">
            <el-input clearable v-model="SerchForm.typeName" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
        <div class="serch_btn">
          <el-button type="primary" @click="query">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </div>
      </div>
      <LsdTable slot="yjrwlb" :autoHeight="table.autoHeight" :multiple="table.multiple"
        :paginationAtrrs="table.paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef" ref="zdlbList"
        :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @select="select" @onActionClick="onActionClick" />
    </div>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig" @close="close(dialogConfig)">
      <div slot="dialog" v-if="dialogConfig.isShow" class="form_box">
        <el-form ref="formConfig" :rules="rules"
          style="display: flex;flex-direction: column;justify-content: center;align-items: center;" :model="form"
          label-width="120px">
          <el-form-item label="字典名称：" prop="typeName">
            <el-input clearable v-model="form.typeName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="字典编码：" prop="code">
            <el-input clearable v-model="form.code" placeholder="例如：dic_yxfw      dic_ + 字典名称拼音简写"></el-input>
          </el-form-item>
          <el-form-item label="描述：" prop="codeDesc">
            <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="form.codeDesc">
            </el-input>
          </el-form-item>
        </el-form>
      </div>
    </LsdDialog>
  </div>
</template>

<script>

import { dictionaryTypeList, dictionaryList, dictionaryAdd, dictionaryDelete } from "@/api/SystemConfig/dictionary";
export default {
  components: {},
  data() {
    return {
      rules: {
        typeName: [{ required: true, message: "请输入字典名称：", trigger: "blur" }],
        code: [{ required: true, message: "请输入字典编码：", trigger: "blur" }]
      },
      SerchForm: {
        typeName: ""
      },
      form: {
        typeName: "",
        code: "",
        codeDesc: ""
      },
      selected: [],
      // 列表表格
      table: {
        isSelectFlag: true,
        compRef: "zdlbList",
        isSequenceFlag: false,
        isShowPage: true,
        resetFlag: false,
        loading: false,
        title: "",
        multiple: false,
        actions: [
          {
            id: "add",
            text: "新增",
            type: "primary",
            btnAttr: { size: "small" }
          }
        ],
        tableData: [],
        columns: [
          {
            prop: "typeName",
            label: "字典名称",
            align: "center"
          },
          {
            prop: "code",
            label: "字典编码",
            align: "center"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "50px",
            render: (h, scope) => {
              const arr = ["删除"];
              return (
                <div>
                  {
                    arr.map(item => {
                      return (
                        <span style='color:#3561fd;cursor:pointer;margin:0 10px' {...{
                          on: {
                            click: () => {
                              this.actionHandle(item, scope);
                            }
                          }
                        }}>
                          {item}
                        </span>
                      );
                    })
                  }
                </div >
              );
            }
          }
        ],
        tableAttr: {
          "row-key": "id",
          "tree-props": { children: "children", hasChildren: "hasChildren" },
          /* "min-height": `${window.innerHeight - 270}px`,*/
          height: `${window.innerHeight - 418}px`,
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            color: "#333333",
            "font-size": "18px"
          }
        },
        // 分页信息
        paginationAtrrs: {
          total: 0,
          "background": true,
          layout: "prev, pager, next",
          "current-page": 1,
          "page-size": 10
        }
      },
      checkRadio: "",
      dialogConfig: {
        title: "字典配置",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "确定",
            type: "primary",
            id: "submit",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.getDictionaryList();
  },
  methods: {
    actionHandle(item, scope) {
      if (item === "删除") {
        this.$confirm("此操作将永久删除该字典, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          dictionaryDelete({ id: scope.row.id }).then(res => {
            this.$message({
              message: "删除成功!",
              type: "success"
            });
            this.getDictionaryList();
          });
        })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    getDictionaryList(val) {
      this.table.tableData = [];
      let params = {};
      if (val) {
        params = { ...val };
      } else {
        params = {
          pageNum: 1,
          pageSize: 10
        };
      }
      dictionaryList(params).then(res => {
        res.data.forEach(i => {
          i.children = [];
          this.table.tableData.push(i);
        });
        this.table.paginationAtrrs.total = res.total;
        this.$emit("checkDictionary", res.data[0].id, res.data[0]);
        this.selected = [res.data[0].id];
        this.$nextTick(() => {
          this.$refs.zdlbList.toggleSelection([res.data[0].id]);
          const params = {
            dicTypeId: res.data[0].id
          };
          this.checkRadio = res.data[0].id;
          dictionaryTypeList(params).then(res => {
            const data = res;
            data.forEach(i => {
              i.children = [];
            });
            this.table.tableData[0].children = data;
          });
        });
      });
    },
    close(val) {
      val.isShow = false;
    },
    add() {
      this.form = {
        typeName: "",
        code: "",
        codeDesc: ""
      };
      this.dialogConfig.isShow = true;
    },
    submit() {
      this.$refs.formConfig.validate((valid) => {
        if (valid) {
          let [year, month, day, hours, minutes, seconds] = new Date().toLocaleString().split(/[^\d]+/);
          year = year.padStart(2, "0");
          month = month.padStart(2, "0");
          day = day.padStart(2, "0");
          hours = hours.padStart(2, "0");
          minutes = minutes.padStart(2, "0");
          seconds = seconds.padStart(2, "0");
          const createTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
          const params = { ...this.form, createTime };
          dictionaryAdd(params).then(res => {
            if (res) {
              this.$message({
                message: "添加成功!",
                type: "success"
              });
              this.dialogConfig.isShow = false;
              this.getDictionaryList();
              this.$refs.yjrwlb.paginationAtrrsInner["current-page"] = 1;
            }
          });
        }
      });
    },
    onActionClick(item) {
      this[item.id]();
    },
    select(selection, row) {
      if (selection[0]) {
        this.$emit("checkDictionary", selection[0] ? selection[0].id : "", row);
        const params = {
          dicTypeId: selection[0].id
        };
        this.checkRadio = row.id;
        dictionaryTypeList(params).then(res => {
          const data = res;
          data.forEach(i => {
            i.children = [];
          });
          row.children = data;
        });
      }
    },
    handleSizeChange(val) {
      const params = {
        pageNum: val["current-page"],
        pageSize: val["page-size"]
      };
      dictionaryList(params).then(res => {
        this.table.tableData = res.data;
        this.table.paginationAtrrs.total = res.total;
      });
    },
    query() {
      const params = {
        pageNum: 1,
        pageSize: 10,
        ...this.SerchForm
      };
      this.getDictionaryList(params);
      this.$refs.zdlbList.paginationAtrrsInner["current-page"] = 1;
    },
    reset() {
      this.SerchForm = {};
      this.$refs.zdlbList.paginationAtrrsInner["current-page"] = 1;
      this.getDictionaryList();
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.userList {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .title_box {
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;

    .title {
      width: 90%;
      font-size: 20px;
      font-weight: 600;
      color: #1890ff;
      text-align: center;
    }
  }

  .list_box {
    width: 100%;
    flex: 1;
    box-sizing: border-box;
    padding: 10px 10px 30px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .list_box_serch {
      width: 100%;
      height: 12%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      :deep(.el-form-item) {
        margin: 0;
      }

      :deep(.el-input__inner) {
        height: 32px;
      }
    }
  }
}

// :deep(.leftTopBtn) {
//   height: 0 !important;
//   margin-bottom: 0 !important;
// }
.form_box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  :deep(.el-input__inner) {
    width: 500px;
  }

  :deep(.el-textarea__inner) {
    width: 500px;
  }
}
</style>
